<template>
  <div class="wrap">
    <div class="title">
      <a href="#"><</a>
      <p>正在茶餐厅（景田店）</p>
    </div>
    <div class="option">
      <a href="#">
        <span class="borcolor">点菜</span>
      </a>
      <a href="#">
        <span>评价</span>
      </a>
      <a href="#">
        <span>商家</span>
      </a>
    </div>
    <div class="main">
      <div class="top-wrap">
        <span>新店酬宾，让利推广，不提供发票，还请谅解。进店下单即送美味小食一份，敬请自助下单。茶点类10:00开始供应，中西餐11:00开始供应。本店所有餐品均是现点现制作，不设退换，敬请谅解！</span>
        <i>></i>
      </div>
      <div class="content">
        <div class="list">
          <div class="left">
            <ul>
              <li class="on">
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
              <li>
                <div class="menu">
                  <span><img src="" alt="">热销</span>
                </div>
              </li>
            </ul>
          </div>

          <div class="right">
            <div class="rightwrap">
              <div class="goods">
                <h3>精致肠粉</h3>
                <div class="goodslt">
                  <div class="img"><img src="https://img.meituan.net/100.100.90/wmproduct/5ce65c5b095b3f80df54da841527109263466.jpg" alt=""></div>
                  <div class="describe">
                    <h2>是日例汤（位）</h2>
                    <p>请注意~是日例汤是随机变换，不固定汤品，冬瓜龙骨汤，海带龙骨汤，玉米红萝卜龙骨汤等。</p>
                    <div class="sales"><span>月售 295</span><span>赞12</span></div>
                    <b>￥10</b>
                    <div class="add"><i></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="foot">
      <div class="logo">
        <i></i>
        <p>购物车空空如也～</p>
      </div>
      <div class="price">
        <a href="#">
          <span>￥20起送</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'details',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../static/lib/px2rem.scss';
  *{box-sizing: border-box;}
  .wrap{display: flex; flex-direction:column;}
  .title{display: flex; justify-content: center; position: relative;height: px2rem(44);overflow: hidden;align-items: center;font-size: px2rem(17); font-weight: bold; border-bottom: 1px solid #ccc;}
  .title p{line-height: px2rem(44);}
  .title a{position: absolute; left:0;}
  .main{flex:1;}
  .option{display: flex; border-bottom: 2px solid #f0f0f0;}
  .option a{flex:1; text-align: center; line-height: px2rem(42); display: block; font-size: px2rem(16); color: #666;}
  .option a span{display: inline-block; padding:0 px2rem(8);}
  .option .borcolor{ border-bottom: px2rem(4) solid #FFD161;}
  .top-wrap{ padding: 0 px2rem(25) 0 px2rem(15); height: px2rem(44); font-size: px2rem(12); display: flex; align-items: center;}
  .top-wrap span{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%;display: inline-block;}
  .content{overflow: hidden;}
  .content .left {width: px2rem(85);}
  .content .left ul{width:100%;}
  .content .left li{width:100%; height: px2rem(61); overflow: hidden; background: #efefef;}
  .content .left .on{ background: #fff;}
  .content .left .menu{height: 100%; margin:0 px2rem(6); border-bottom: px2rem(1) solid #bfbfbf; overflow: hidden;}
  .content .menu span{font-size: px2rem(14);display: inline-block; width:100%; position: relative; top:50%; transform: translatey(-50%); line-height: 1.2; padding-left:px2rem(8);}
  .content .menu img{width:px2rem(15);height: px2rem(15);margin-right:px2rem(4);}
  .content .list{display: flex; height: 22.70rem;}
  .content .list .left{overflow-y: auto;}
  .content .list .right{flex: 1; overflow-y: auto;}

  .content .right {height: 22.70rem; overflow: hidden;}
  .content .goods h3{
    &::before{
      content: '';
      display: inline-block;
      height: px2rem(10);
      width: px2rem(2);
      margin: 0 px2rem(5) 0 px2rem(10);
      background: #FFD161;
    }
    font-size: .5rem;
    font-weight: normal;
    line-height: 1.55rem;
  }

  .content .goodslt{
    margin-left: px2rem(10);
    padding:px2rem(15) 0 px2rem(10) 0;
    display: flex;
    border-bottom: 2px solid #f0f0f0;

    .img{
      height: px2rem(62);
      width: px2rem(62);
      overflow: hidden;
      margin-right:px2rem(10);
      img{
        height: 100%;
        transform: translateX(-50%);
        position: relative;
        left: 50%;
      }
    }

    .describe{
      color: #a9a9a9;
      position: relative;
      flex:1;
      h2{
        font-size: px2rem(16);
        color: #2f2f2f;
        font-weight: normal;
        line-height: px2rem(20);
      }
      p{
        font-size: px2rem(12);
        line-height: px2rem(15);
        margin: px2rem(5) px2rem(10) 0 0;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .sales{
        font-size: px2rem(12);
        line-height: px2rem(15);
        margin: px2rem(5) px2rem(10) 0 0;
      }
      b{
        color: #fe4d3d;
        font-size: px2rem(17);
        font-weight: normal;
        margin: px2rem(3) px2rem(10) 0 0;
        display: block;
        line-height: 1.3;
      }
      .add i{
        width: px2rem(25);
        height: px2rem(25);
        display: block;
        position: absolute;
        right:px2rem(10);
        bottom:0;
        background: url(//xs01.meituan.net/waimai_i/img/add-food.4a0b4c25.png) no-repeat center;
      }
    }
  }

  .foot{
    height: px2rem(50);
    position: fixed; bottom: 0; width: 100%;
    background-color: rgba(51,51,51,0.9);
    z-index: 1000;
    border-top:2px solid #cacaca;
    .logo{
      i{
        display: block;
        width: px2rem(50);
        height: px2rem(57);
        position: relative;
        top: px2rem(-18);
        float: left;
        margin-right: px2rem(10);
        background: url(//xs01.meituan.net/waimai_i/img/cart.ab827c23.png) no-repeat;
      }
      p{
        font-size: px2rem(13);
        color: #888;
        line-height: px2rem(50);
      }
      padding-left: px2rem(12);
    }
    .price{
      width: px2rem(110);
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      font-size: px2rem(16);
      text-align: center;
      line-height: px2rem(50);

      a{
        color: #999;
        display: block;
        height: 100%;
      }
    }
  }
</style>
